<template>
  <div class="app-container">
    app-container
    <!-- <Commons></Commons> -->
    <Commons1></Commons1>
    <div class="headerB">
      <HeaderCom></HeaderCom>
      <HeaderCom></HeaderCom>
    </div>
    <div class="box">
      <div class="left">
        <NavCom></NavCom>
      </div>
      <div class="right">
        <MainCom></MainCom>
      </div>
    </div>
    <div class="fooerB">
      <FooterCom></FooterCom>
    </div>
  </div>
</template>
<script>
import HeaderCom from './components/HeaderCom.vue'
import NavCom from './components/NavCom.vue'
import MainCom from './components/MainCom.vue'
import FooterCom from './components/FooterCom.vue'
// import Commons from './components/Commons.vue'
export default {
  name: '',
  /* 方式1：注册组件  ===局部注册 */
  components: {
    /* 组件名:组件对象 */
    HeaderCom,
    NavCom,
    MainCom,
    FooterCom,
    // Commons
  },
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    handle () {

    },
    add () { },
    add2 () {

    },
    qqq () { }
  }
}
</script>
<style lang='less' scoped >
.header-container {
  background-color: yellow;
}
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .headerB {
    width: 200px;
  }

  .fooerB {
    width: 200px;
  }

  .box {
    flex: 1;
    display: flex;

    .left {
      width: 200px;
      background-color: pink;
    }

    .right {
      flex: 1;
      background-color: greenyellow;
    }
  }
}
</style>
